<template>
  <div class="wrap">
    <div id="top">
      <div>
        <slot></slot>
      </div>
      <div>
        <div>
          <div class="wrap-icon">
            <div class="address">
              <div>
                <i class="iconfont-right">&#xe678;</i>
              </div>
              <div>地址簿</div>
            </div>
            <div class="smart-write">
              <div>
                <i class="iconfont-right">&#xe7e8;</i>
              </div>
              <div>智能填写</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <div>
        <el-form :model="form" label-width="120px">
          <el-form-item required label="姓名">
            <el-input v-model="form.name" placeholder="请填写真实姓名" />
          </el-form-item>
          <el-form-item required label="联系电话">
            <el-input v-model="form.phoneNumber" placeholder="请填写手机号码" />
          </el-form-item>
          <el-form-item required label="省市区">
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              ref="shengshi"
              @change="handleChange"
              placeholder="请选择省市区"
            ></el-cascader>
          </el-form-item>
          <el-form-item required label="详细地址">
            <el-input v-model="form.address" placeholder="请填写详细地址" />
          </el-form-item>
          <el-form-item required label="选择快递公司">
            <el-select
              v-model="form.companyName"
              placeholder="请选择快递公司"
              @change="updateCompany"
            >
              <el-option label="顺丰" value="顺丰" />
              <el-option label="京东" value="京东" />
              <el-option label="中通" value="中通" />
              <el-option label="申通圆通" value="申通圆通" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { type DataItem, provinceAndCityData } from "element-china-area-data";


const emit = defineEmits<{
  (event: "updateCompany", value: string): void;
}>()
const props = defineProps(["sendForm", "companyName"]);
const options = ref<DataItem[]>(provinceAndCityData);
const selectedOptions = ref<[]>([]);
interface ShengshiType {
  getCheckedNodes: () => { pathLabels: string[] }[];
}
const shengshi = ref<ShengshiType | null>(null);

interface MyForm{
  name: string;
  phoneNumber: string;
  province: string;
  address: string;
  companyName: string;
}
const form = reactive<MyForm>({
  name: "",
  phoneNumber: "",
  province: "",
  address: "",
  companyName: "",
});
form.companyName = props.companyName;
watch(form, (newValue) => {
  props.sendForm(form);
});
watch(
  () => props.companyName,
  (newValue) => {
    form.companyName = newValue;
  }
);
const updateCompany = (newValue: string) => {
  emit("updateCompany", newValue);
};
const handleChange = () => {
    console.log(selectedOptions);
       if(shengshi.value){
          var arr = shengshi.value.getCheckedNodes() ;
          let path = arr[0].pathLabels[0]+arr[0].pathLabels[1]
          form.province = path;
       }
      
}
</script>

<style scoped lang="less">
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "iconfont"; /* Project id 4410292 */
  src: url("//at.alicdn.com/t/c/font_4410292_0pr074erb58d.woff2?t=1706444958188")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4410292_0pr074erb58d.woff?t=1706444958188")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4410292_0pr074erb58d.ttf?t=1706444958188")
      format("truetype");
}

.iconfont-right {
  font-family: "iconfont" !important;
  font-size: 1rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  border-radius: 1rem;
  background-color: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  #top {
    flex: 1;

    display: flex;
    justify-content: space-between;
    > div:first-child {
      flex: 1;

      display: flex;
      justify-content: center;
      align-items: center;
    }
    > div:nth-child(2) {
      flex: 4;
      display: flex;
      justify-content: flex-end;
      > div:first-child {
        width: 60%;

        display: flex;
        justify-content: center;
        align-items: center;
        .wrap-icon {
          width: 80%;
          height: 50%;
          background-color: white;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .address {
            height: 100%;
            width: 40%;

            display: flex;
            border: 1px solid #f4f5f7;
            > div:first-child {
              flex: 2;

              display: flex;
              justify-content: center;
              align-items: center;
            }
            :nth-child(2) {
              flex: 5;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.8rem;
            }
          }
          .smart-write {
            height: 100%;
            width: 40%;

            display: flex;
            > div:first-child {
              flex: 2;

              display: flex;
              justify-content: center;
              align-items: center;
            }
            :nth-child(2) {
              flex: 5;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.8rem;
            }
          }
        }
      }
    }
  }
  #bottom {
    flex: 4;

    > div:first-child {
      padding: 0.5rem 1rem 1px 1rem;
    }
  }
  :deep(.el-input__wrapper) {
    background-color: #f4f5f7 !important;
  }
  :deep(.el-input__inner) {
    font-size: 0.8rem !important;
  }
  .el-input {
    font-size: 0.8rem !important;
  }
  .el-cascader {
    font-size: 0.4rem !important;
    background-color: #f4f5f7 !important;
  }
  :deep(.el-input--large ){
     --el-input-height:32px !important;
    font-size: 14px !important;
}
:deep(.el-cascader){
    width:100% !important;
}
  :deep(.el-select__wrapper) {
    font-size: 0.8rem !important;
    background-color: #f4f5f7 !important;
  }
}
</style>
